@charset "utf-8";
@import "_reset";
@import "_base";

.wrap{
    width: 100vw;
    height: 100vh;
    background: url(../img/bg.png) no-repeat fixed;
    background-size: cover;
    position: relative;

    .list-box{
        width: vw(590);
        height: vw(840);
        position: absolute;
        box-shadow: 0 0 15px gray;
        top: 50%;
        left: 50%;
        margin-left: vw(-295);
        margin-top: vw(-420);
        background-color: rgba(255, 255, 255, 0.3);

        .hint{
            position: absolute;
            font-size: vw(26);
            color: #000;
            font-weight: 700;
            bottom: vw(65);
            left: 50%;
            margin-left: vw(-210);
        }

        #Dataer{
            border: none;
            color:#0075c1;
            margin-top: vw(70);
            margin-left: vw(55);
            font-size: vw(30);
        }

        #Data-list{
            display: flex;
            flex-direction: column;
            margin-top: vw(88);
            font-size: vw(26);
            height: vw(550);

            .title-list{
                display: flex;
                justify-content: space-around;
                color: #0075c1;
                // margin-bottom: vw(90);
            }

            .spanlist{
                display: flex;
                // width: 80%;
                flex-direction: column;
                justify-content: space-around;
                height: vw(500);
                color: #434242;
            }

            .spanbox{
                display: flex;
                justify-content: space-around;
                // margin-bottom: vw(120);

            }

        }
    }
}